
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>地图显示</title>
    <style type="text/css">
        html  { height:100% ; width: 100%}
        body { height: 98% ; width: 100%}
        #iCenter  { height: 98% ; width: 100%}
        .label{position:relative; width: 200px}
        .label span{ height:190px;color:#000;border:1px solid red;font-size:18px;white-space:nowrap; background-image:url(../images/2008062846617161.jpg)}

    </style>


    <script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=3765ed964b2c366b8fd626ae5350798f"></script>
    <script language="javascript">
        var mapObj;
        var x,y; //鼠标所在横坐标和纵坐标
        //初始化地图对象，加载地图
        function mapInit(){
            mapObj = new AMap.Map("iCenter",{
                center:new AMap.LngLat(116.397428,39.90923), //地图中心点
                level:13  //地图显示的缩放级别
            });

         //增加各类插件
            //添加地图类型切换插件
            mapObj.plugin(["AMap.MapType"],function(){
                //地图类型切换
               var type1= new AMap.MapType({defaultType:0});//初始状态使用2D地图
                mapObj.addControl(type1);
            });
            //添加比例尺插件
            mapObj.plugin(["AMap.Scale"],function()
            {
                var type2=new AMap.Scale();
                type2.show();
                mapObj.addControl(type2);
            });

            //注册鼠标移动事件 响应的函数
                var mousemoveEventListener=AMap.event.addListener(mapObj,'mousemove',function(e){
                x=e.lnglat.getLng();
                y=e.lnglat.getLat();
                document.getElementById("x").innerHTML=x;
                document.getElementById("y").innerHTML=y;

            });

            //注册鼠标右键点击事件  添加标志
                var rightclickEventListener=AMap.event.addListener(mapObj,'rightclick',function(e){
                    x=e.lnglat.getLng();
                    y=e.lnglat.getLat();
                    document.getElementById("x").innerHTML=x;
                    document.getElementById("y").innerHTML=y;
                    //addMarker(x,y);
                   addCustomMarker(x,y);
                });


        }
/*
        //实例化点标记
        function addMarker(x,y){
            marker=new AMap.Marker({
                  size:16*16,
                 icon:"../images/Adobe_GoLive_CS.ico",
                // content:"<a href='http://www.sohu.com' '>哈哈 我在这里</a>", //可以自定义一个标签
                position:new AMap.LngLat(x,y),
                draggable:true   //设置是否可以移动
            });
            marker.setMap(mapObj);  //在地图上添加点
        }*/


        function addCustomMarker(x,y){

            var m = document.createElement("div");

            m.className = "label";

            var n = document.createElement("span");
           // n.style.backgroundImage="../images/flag_button.jpg"; 这里好像不行
            n.innerHTML = "文本标注 <a href='NewFile.html' >详情</a>  ";
            m.appendChild(n);
            var marker = new AMap.Marker({

                map:mapObj,
                position:new AMap.LngLat(x,y), //基点位置
                offset:new AMap.Pixel(-28,-14), //相对于基点的偏移位置
                draggable:true, //是否可拖动
                content:m   //自定义覆盖物内容
            });
        }

   </script>

</head>
<body  onLoad="mapInit()">
当前坐标:<label id="x"></label>-- <label id="y"></label>
<div id="iCenter" ></div>

<p style="background-image:url(../images/2008062846617161.jpg)"> kjdd
</p>

<p>ddddxx</p>
 
</body>

</html>